<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
      <style>
        .box{
            width: 100%;
            height: 200px;
            
            background-color: pink;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .box1{
            width: 80px;
            height: 50px;
            color: aliceblue;
            line-height: 50px;
            background-color: aqua;
            margin: 10px;
            border: 0px;
            border-radius: 10px;
            font-size: 16px;
        }
        .box2{
            width: 80px;
            height: 50px;
            color: aliceblue;
            line-height: 50px;
            background-color: rgb(30, 36, 144);
            margin: 10px;
            border: 0px;
            border-radius: 10px;
            font-size: 16px;
        }
        .box3{
            width: 80px;
            height: 50px;
            color: aliceblue;
            line-height: 50px;
            background-color: rgb(10, 141, 39);
            margin: 10px;
            border: 0px;
            border-radius: 10px;
            font-size: 16px;
        }
        .box4{
            width: 80px;
            height: 50px;
            color: aliceblue;
            line-height: 50px;
            background-color: rgb(230, 8, 141);
            margin: 10px;
            border: 0px;
            border-radius: 10px;
            font-size: 16px;
        }
        .box5{
            width: 80px;
            height: 50px;
            color: aliceblue;
            line-height: 50px;
            background-color: rgb(59, 130, 92);
            margin: 10px;
            border: 0px;
            border-radius: 10px;
            font-size: 16px;
        }
        .abc{
            width: 200px;
            height: 50px;
            border: 1px solid red;
            margin: 0 auto;
            display: none;
        }



        
      </style>
</head>
<body>
<div class="box">
      <input type="button" value="提示信息" class="box1">
      <input type="button" value="成功提示"class="box2">
      <input type="button" value="警告提示"class="box3">
      <input type="button" value="失败提示"class="box4">
      <input type="button" value="扩展提示"class="box5">
    </div>
    <div class="abc">123</div>
</body>
<script>
//步骤分析  原型指向
    //获取元素
    
     let oinfo = document.querySelector('.box1')
     let osuccess = document.querySelector('.box2')
     let owarning = document.querySelector('.box3')
     let odanger = document.querySelector('.box4')
     let obox5 = document.querySelector('.box5')


    //  this.Message.prototype.type=functiona fun(e)
    //     e.this.type.div,{
    //         // type.innerHTML=this

    //     }
    //fun(inter)
    // Tab.prototype.setIndex = function(){
    //     this.btns.forEach((val,idx)=>{
    //         val.index = idx;
    //     })
    // }
     
    //  var Fire
    //  Fire.prototype.move = function(){
    //     move(this.div, {
    //         top: this.target.y,
    //         left: this.target.x
    //     }, ()=>{
    //         this.div.remove();
    //         for(let i=0;i<random(10, 20);i++){
    //             new SmallFire({
    //                 cont: this.cont,
    //                 now:{
    //                     x: this.target.x,
    //                     y: this.target.y
    //                 }
    //             })
    //         }
    //     })
    // }

     oinfo.onclick = function(){
        alert('成功提示')
        
     }

    //  oinfo.onclick= function(){
    //     new Message({
    //         text:'信息提醒',
    //         type:'info'
    //     })
    //  }

     osuccess.onclick = function(){
        new Message({
            text:'信息提示',
            type:'success'
        })
     }
     owarning.onclick=function(){
        new Message({
            text:'警告提示',
            type:'warning',
            duration:0,
            center:true,
            onClsoe:function(){
                alert('知道了')
            }
        })
     }
     odanger.onclick=function(){
        new Message({
            text:'失败提示',
            type:'error'
        })
     }
     
     oinfo.onclick = function(){
        alert('成功提示')
        
     }
     osuccess.onclick = function(){
        alert('知道了')
        
     }
     owarning.onclick = function(){
        alert('失败提示')
        
     }
     odanger.onclick = function(){
        alert('成功提示')
        
     }

</script>
</html>